<template>
  <el-container class="template-view panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="template.type" @tab-change="getData">
        <el-tab-pane label="模板列表" name="template"></el-tab-pane>
        <el-tab-pane label="自定义页面" name="diypage"></el-tab-pane>
      </el-tabs>
      <div class="sa-flex sa-row-between">
        <span>列表</span>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button icon="Plus" type="primary" @click="addTemplate">新建模板</el-button>
          <el-button type="danger" icon="Delete" plain @click="openRecyclebin">回收站</el-button>
        </div>
      </div>
    </el-header>
    <el-main v-loading="template.loading">
      <div v-if="template.list.length > 0" class="template-wrap sa-flex sa-flex-wrap">
        <template v-for="temp in template.list" :key="temp">
          <div class="item">
            <el-carousel trigger="click" height="480px" :autoplay="false" :loop="false" indicator-position="none">
              <el-carousel-item v-for="page in temp.page" :key="page">
                <saImage ref="saImageRef" :url="page.image"></saImage>
              </el-carousel-item>
            </el-carousel>
            <div class="footer">
              <div class="name">{{ temp.name }}</div>
              <template v-if="template.type == 'template'">
                <div class="platform sa-flex">
                  <div class="label">支持平台：</div>
                  <div v-if="temp.platform">
                    <!-- <sa-icon
                        class="sa-m-r-8"
                        v-for="pl in temp.platform"
                        :key="pl"
                        :icon="'sa-shop-decorate-' + pl"
                        size="20"
                        :style="{
                          color: platformList.find((pf) => {
                            return pf.type == pl;
                          })?.color,
                        }"
                      /> -->
                  </div>
                </div>
              </template>
              <div class="memo sa-flex">
                <div class="label">备注：</div>
                <div>{{ temp.memo }}</div>
              </div>
              <div class="update-time sa-flex">
                <div class="label">更新时间：</div>
                <div>{{ temp.update_time }}</div>
              </div>
              <div class="oper sa-flex sa-row-between">
                <el-button class="is-link" type="primary"  @click="decorateTemplate(temp.id)">
                  装修
                </el-button>
                <div class="sa-flex">
                  <el-button class="is-link" type="primary"  @click="editTemplate(temp.id)">
                    编辑
                  </el-button>
                  <template v-if="template.type == 'template'">
                    <el-button class="is-link" type="info"  @click="onCopy(temp.id)">
                      复制
                    </el-button>
                    <el-button class="is-link" :type="temp.status == 'enable' ? 'success' : 'info'"  
                      @click="onStatus(temp)">
                      {{ temp.status_text }}
                    </el-button>
                  </template>
                  <el-popconfirm width="fit-content" confirm-button-text="确认" cancel-button-text="取消" title="确认删除这条记录?"
                    @confirm="deleteTemplate(temp.id)">
                    <template #reference>
                      <el-button class="is-link" type="danger"  >
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <sa-empty v-if="template.list.length == 0" />
      <edit v-model="editVisibel"></edit>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'shop.admin.decorate.template',
};
</script>
<script setup>
import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';



const saImage = defineAsyncComponent(() => import('/@/components/sa/sa-image.vue'));
const edit = defineAsyncComponent(() => import('/@/views/shop/templateManagement/components/edit.vue'))
const router = useRouter();
const saImageRef = ref();
//   import { useRouter } from 'vue-router';
//   import { api } from 'decorate.service';
//   import { useModal } from '/@/sheep/hooks';
//   import { platformList } from '../page/data';

//   import TemplateRecyclebin from './recyclebin.vue';

//   const router = useRouter();
const editVisibel = ref(false)
const template = reactive({
  loading: false,
  type: 'template',
  list: [],
});

async function getData() {
  template.loading = true;
  template.list = [
    {
      "status_text": "已禁用",
      "type_text": "店铺模板",
      "id": 1716,
      "name": "全品类",
      "type": "template",
      "memo": "演示站模板",
      "platform": [
        "WechatOfficialAccount",
        "WechatMiniProgram",
        "H5",
        "App"
      ],
      "status": "disabled",
      "create_time": "2024-02-04 16:20:34",
      "update_time": "2024-02-04 16:20:34",
      "delete_time": null,
      "page": [
        {
          "decorate_id": 1716,
          "type": "home",
          "image": "https://file.sheepjs.com/storage/decorate/20230110/56e8c4c48708bd58dfab49ff7a6c4c3a.png"
        },
        {
          "decorate_id": 1716,
          "type": "user",
          "image": "https://file.sheepjs.com/storage/decorate/20230104/21b7e79610d7efd03ec3188309dfd389.png"
        }
      ]
    },
    {
      "status_text": "已禁用",
      "type_text": "店铺模板",
      "id": 1715,
      "name": "全品类",
      "type": "template",
      "memo": "演示站模板",
      "platform": [
        "WechatOfficialAccount",
        "WechatMiniProgram",
        "H5",
        "App"
      ],
      "status": "disabled",
      "create_time": "2024-02-04 16:00:41",
      "update_time": "2024-02-04 16:00:41",
      "delete_time": null,
      "page": [
        {
          "decorate_id": 1715,
          "type": "home",
          "image": "https://file.sheepjs.com/storage/decorate/20230110/56e8c4c48708bd58dfab49ff7a6c4c3a.png"
        },
        {
          "decorate_id": 1715,
          "type": "user",
          "image": "https://file.sheepjs.com/storage/decorate/20230104/21b7e79610d7efd03ec3188309dfd389.png"
        }
      ]
    }
  ]
  template.loading = false;
}

// 新增模板
const addTemplate = () => {
  editVisibel.value = true;
}
function decorateTemplate(id) {
  router.push({
		path: '/shop/page',
		// query: { id: v },
	});
  // router.push(`/shop/admin/decorate/page?id=${id}&fromType=${template.type}`);
}
function editTemplate(id) {
  useModal(
    TemplateEdit,
    {
      title: '编辑',
      type: 'edit',
      id: id,
      templateType: template.type,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}
async function deleteTemplate(id) {
  await api.template.delete(id);
  getData();
}

async function onCopy(id) {
  await api.template.copy(id);
  getData();
}

async function onStatus(item) {
  await api.template.status(item.id, {
    status: item.status == 'enable' ? 'disabled' : 'enable',
  });
  getData();
}

function openRecyclebin() {
  useModal(
    TemplateRecyclebin,
    {
      title: '回收站',
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.template-view {
  .template-wrap {
    padding: 10px 20px;

    .item {
      position: relative;
      width: 246px;
      height: 480px;
      border: 1px solid var(--sa-space);
      box-shadow: 0 0 4px rgba(89, 89, 89, 0.2);
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: var(--sa-padding);
      overflow: hidden;
      margin-right: 20px;

      img {
        width: 100%;
      }

      &:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(89, 89, 89, 0.24);

        .footer {
          opacity: 1;
        }
      }

      :deep() {
        .image-slot {
          height: 200px;
        }
      }

      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: fit-content;
        padding: 0 12px;
        background: #fdfdfd;
        transition: all 0.5s;
        opacity: 0;

        .name {
          padding: 12px 0 4px;
          font-size: 16px;
        }

        .platform {
          height: 28px;
          font-size: 14px;
          color: var(--sa-subtitle);
        }

        .memo,
        .update-time {
          height: 20px;
          font-size: 12px;
          color: var(--sa-subfont);
        }

        .label {
          flex-shrink: 0;
        }

        .oper {
          height: 36px;

          .el-button+.el-button {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
  